<template>
  <el-config-provider :locale="locale">
    <router-view
      v-slot="{ Component, route }"
      :key="route.fullPath"
      class="router-view"
    >
      <transition mode="out-in" name="fade">
        <template v-if="route.meta.layout === 'home'">
          <MainContainer>
            <transition mode="out-in" name="fade">
              <component :is="Component" />
            </transition>
          </MainContainer>
        </template>
        <template v-else>
          <div class="layoutbox">
            <component :is="Component" />
          </div>
        </template>
      </transition>
    </router-view>
  </el-config-provider>
</template>

<script setup lang="ts">
import autofit from 'autofit.js'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useResizeObserver } from '@vueuse/core'
import MainContainer from '@/layouts/main-container.vue'
import { useAppStore } from '@/store/modules/app'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()

const appStore = useAppStore()
const locale = zhCn

autofit.init({
  dh: 961,
  dw: 1920,
  el: '#app'
})

useResizeObserver(document.getElementById('app'), () => {
  const element = document.getElementById('app')
  if (!element) return
  const transform = window
    .getComputedStyle(element)
    .getPropertyValue('transform')
  const matrix = transform.match(/^matrix\((.+)\)$/)
  if (matrix) {
    const matrixValues = matrix[1].split(', ')
    const scale = parseFloat(matrixValues[0])
    console.log(`scale: ${scale}`)
    appStore.scale = scale
  }
})
</script>

<style lang="scss">
.layoutbox {
  width: 100%;
  height: 100%;
}
</style>
